Module: LoyaltyProgramDetail
Interfaces
Functions
LoyaltyProgramDetail
▸ LoyaltyProgramDetail(inProps): JSX.Element
API documentation for the Community-JS Loyalty Program Detail Template. Learn about the available props and the CSS API.
This component renders the loyalty program detail template. Take a look at our demo component here
Import
import {LoyaltyProgramDetail} from '@selfcommunity/react-templates';
Component Name
The name SCLoyaltyProgramDetailTemplate can be used when providing style overrides in the theme.
CSS
| Rule Name | Global class | Description |
|---|---|---|
| root | .SCLoyaltyProgramDetailTemplate-root | Styles applied to the root element. |
| userPoints | .SCLoyaltyProgramDetailTemplate-user-points | Styles applied to the chip element. |
| title | .SCLoyaltyProgramDetailTemplate-title | Styles applied to the title element. |
| sectionTitle | .SCLoyaltyProgramDetailTemplate-section-title | Styles applied to the section title element. |
| sectionInfo | .SCLoyaltyProgramDetailTemplate-section-info | Styles applied to the section info element. |
| pointsSection | .SCLoyaltyProgramDetailTemplate-points-section | Styles applied to the points section. |
| prizeSection | .SCLoyaltyProgramDetailTemplate-prize-section | Styles applied to the prize section. |
| card | .SCLoyaltyProgramDetailTemplate-card | Styles applied to the card elements. |
| cardTitle | .SCLoyaltyProgramDetailTemplate-card-title | Styles applied to the card title element. |
| cardContent | .SCLoyaltyProgramDetailTemplate-card-content | Styles applied to the card content section. |
| prizePoints | .SCLoyaltyProgramDetailTemplate-prize-points | Styles applied to the prize points element. |
| actionButton | .SCLoyaltyProgramDetailTemplate-action-button | Styles applied to the action button element. |
| notRequestable | .SCLoyaltyProgramDetailTemplate-not-requestable | Styles applied to elements that are not requestable. |
| endMessage | .SCLoyaltyProgramDetailTemplate-end-message | Styles applied to the infinity scroll final section. |
| /** |
Parameters
| Name | Type |
|---|---|
inProps | LoyaltyProgramDetailProps |
Returns
JSX.Element
Defined in
LoyaltyProgramDetail/LoyaltyProgramDetail.tsx:92
LoyaltyProgramDetailSkeleton
▸ LoyaltyProgramDetailSkeleton(): JSX.Element
API documentation for the Community-JS Loyalty Program Detail Skeleton component. Learn about the available props and the CSS API.
Import
import {LoyaltyProgramDetailSkeleton} from '@selfcommunity/react-templates';
Component Name
The name SCLoyaltyProgramDetailTemplate-skeleton-root can be used when providing style overrides in the theme.
CSS
| Rule Name | Global class | Description |
|---|---|---|
| root | .SCLoyaltyProgramDetailTemplate-skeleton-root | Styles applied to the root element. |
| title | .SCLoyaltyProgramDetailTemplate-title | Styles applied to the title element. |
| sectionTitle | .SCLoyaltyProgramDetailTemplate-section-title | Styles applied to the section title element. |
| subTitle | .SCLoyaltyProgramDetailTemplate-subTitle | Styles applied to the subTitle element. |
| pointsList | .SCLoyaltyProgramDetailTemplate-points-list | Styles applied to the points list section. |
| chip | .SCLoyaltyProgramDetailTemplate-chip | Styles applied to the chip element. |
Returns
JSX.Element
Defined in
LoyaltyProgramDetail/Skeleton.tsx:47
PrizeItemSkeleton
▸ PrizeItemSkeleton(): JSX.Element
API documentation for the Community-JS PrizeItemSkeleton Skeleton component. Learn about the available props and the CSS API.
Component Name
The name SCLoyaltyProgramDetailTemplate-prize-item-skeleton-root can be used when providing style overrides in the theme.
CSS
| Rule Name | Global class | Description |
|---|---|---|
| root | .SCLoyaltyProgramDetailTemplate-prize-item-skeleton-root | Styles applied to the root element. |
| content | .SCLoyaltyProgramDetailTemplate-content | Styles applied to the card content section. |
| actions | .SCLoyaltyProgramDetailTemplate-actions | Styles applied to the actions section. |
Returns
JSX.Element